<template>
  <div>
    <el-form
      :model="formData"
      :rules="rules"
      ref="formDataRef"
      label-width="100px"
    >
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item prop="avatar" label="头像 ">
            <CoverUpload v-model="formData.avatar"></CoverUpload>
          </el-form-item>
          <el-form-item prop="nickName" label="昵称">
            <el-input
              placeholder="请输入昵称"
              v-model.trim="formData.nickName"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号">
            <el-input
              placeholder="请输入手机号"
              v-model.trim="formData.phone"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <a href="javascript:void(0)" class="a-link" @click="changePWD"
              >修改密码</a
            >
          </el-form-item>
          <el-form-item prop="editorType" label="默认编辑器">
            <el-radio-group v-model="formData.editorType">
              <el-radio :value="0">富文本</el-radio>
              <el-radio :value="1">Markdown</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="profession" label="职业">
            <el-input
              placeholder="请输入职业"
              v-model.trim="formData.profession"
              size="large"
            >
            </el-input>
          </el-form-item>
          <el-form-item :style="{ width: '100%' }">
            <el-button
              type="danger"
              :style="{ width: '100%' }"
              @click="saveMyInfo"
              >保存</el-button
            >
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item prop="introduction" label="简介">
            <EditorHtml
              v-model="formData.introduction"
              :height="editorHtmlHeight"
            ></EditorHtml>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      @close="dialogConfig.show = false"
      ><el-form
        :model="pwdFormData"
        :rules="rules"
        ref="pwdFormDataRef"
        label-width="100px"
      >
        <el-form-item prop="password" label="密码 ">
          <el-input
            placeholder="请输入密码"
            type="password"
            v-model.trim="pwdFormData.password"
            size="large"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="rePassword" label="确认密码 ">
          <el-input
            placeholder="请再次输入密码"
            type="password"
            v-model.trim="pwdFormData.rePassword"
            size="large"
          >
          </el-input>
        </el-form-item> </el-form
    ></Dialog>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
const store = useStore();
import {
  ref,
  getCurrentInstance,
  onMounted,
  reactive,
  nextTick,
  watch,
} from "vue";
const { proxy } = getCurrentInstance();
import md5 from "js-md5";
import { ElMessage } from "element-plus";
const api = {
  getUserInfo: "getUserInfo",
  saveMyInfo: "saveMyInfo",
  updateMyPassword: "updateMyPassword",
  saveAvatar: "saveAvatar",
};
const emit = defineEmits();
const dialogConfig = reactive({
  show: false,
  title: "标题",
  buttons: [
    {
      type: "danger",
      text: "确定",
      click: (e) => {
        submitForm();
      },
    },
  ],
});

const pwdFormData = ref({});
const formData = ref({});
const rules = {
  nickName: [{ required: true, message: "昵称不能为空" }],
  editorType: [{ required: true, message: "请选择默认编辑器" }],
  phone: [
    { required: true, message: "请输入手机号" },
    {
      validator: proxy.Verify.validatePhone,
      trigger: "blur",
      message: "请输入正确的手机号",
    },
  ],
  password: [
    { required: true, message: "请输入密码" },
    {
      validator: proxy.Verify.validatePassword,
      trigger: "blur",
      message: "密码最少8位，包含至少一个大写字母、一个小写字母和一个数字",
    },
  ],
  rePassword: [
    { required: true, message: "请再次输入密码" },
    {
      validator: checkPwd,
      trigger: "blur",
      message: "两次密码输入不一致",
    },
  ],
};
const formDataRef = ref(null);
const pwdFormDataRef = ref(null);
const editorHtmlHeight = window.innerHeight - 390 - 65;
const getUserInfo = async () => {
  let result = await proxy.Request({
    url: api.getUserInfo,
  });
  if (!result) {
    return;
  }
  formData.value = result.data;
};

const saveMyInfo = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) return;
    let result = await proxy.Request({
      url: api.saveMyInfo,
      params: {
        nickName: formData.value.nickName,
        avatar: formData.value.avatar,
        phone: formData.value.phone,
        editorType: formData.value.editorType,
        profession: formData.value.profession,
        introduction: formData.value.introduction,
      },
    });
    if (!result) {
      return;
    }
    store.commit("updateUserInfo", {
      nickName: formData.value.nickName,
      avatar: formData.value.avatar,
    });
    ElMessage.success("修改成功");
  });
};

onMounted(() => {
  getUserInfo();
});

const changePWD = () => {
  dialogConfig.show = true;
  nextTick(() => {
    pwdFormDataRef.value.resetFields();
    pwdFormData.value = {};
  });
};

// 修改密码
const submitForm = () => {
  pwdFormDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let result = await proxy.Request({
      url: api.updateMyPassword,
      params: {
        password: pwdFormData.value.password,
      },
    });
    if (!result) {
      return;
    }
    ElMessage.success("修改成功");
    // emit("callback");
  });
};

// 确认密码
function checkPwd(rule, value, callback) {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== pwdFormData.value.password) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
}
// 自动保存头像
watch(
  () => formData.value.avatar,
  (newAvatar, oldAvatar) => {
    if (newAvatar) {
      saveAvatar();
    } else {
      console.log("文件已移除");
    }
  }
);
const saveAvatar = async () => {
  let result = await proxy.Request({
    url: api.saveAvatar,
    params: {
      avatar: formData.value.avatar,
    },
  });
  if (!result) {
    return;
  }
  store.commit("updateUserInfo", {
    nickName: formData.value.nickName,
    avatar: formData.value.avatar,
  });
};
</script>

<style lang="scss" scoped></style>
